<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>time series demo</title>
    <link rel="stylesheet" href="niivue.css" />
    <style>
      .unstyled-button {
        border: none
        padding: 0
        background: #202020
        color: white
      }
    </style>
  </head>
  <body>
    <header>
      <label for="modalitySelect">Modality</label>
      <select id="modalitySelect">
        <option selected>ASL</option>
        <option>DWI</option>
        <option>fMRI</option>
        <option>FLAIR</option>
        <option>T1</option>
        <option>T2</option>
      </select>
      &nbsp;&nbsp;<label for="viewSelect">View</label>
      <select id="viewSelect">
        <option value="0">Axial</option>
        <option value="1">Coronal</option>
        <option value="2">Sagittal</option>
        <option value="4">Render</option>
        <option value="3" selected>A+C+S+R</option>
      </select>
      <label for="dragSelect">Drag</label>
      <select id="dragSelect">
        <option value="contrast" selected>contrast</option>
        <option value="measurement">measurement</option>
        <option value="pan">pan/zoom</option>
        <option value="none">none</option>
      </select>
      <label for="darkCheck">Dark</label>
      <input type="checkbox" id="darkCheck" checked />
      &nbsp;&nbsp;
      <label for="dpiCheck">HighDPI</label>
      <input type="checkbox" id="dpiCheck" checked />
      <label for="fontMinPxSlider">&nbsp;&nbsp;Min Font Size</label>
      <input
        type="range"
        min="10"
        max="40"
        value="13"
        class="slider"
        id="fontMinPxSlider"
      />
      <label for="fontSizeScalingSlider">&nbsp;&nbsp;Font Scale</label>
      <input
        type="range"
        min="0"
        max="100"
        value="50"
        class="slider"
        id="fontSizeScalingSlider"
      />
      <div id="controls4D">
        &nbsp;&nbsp;<label for="normCheck">Normalize graph</label>
        <input type="checkbox" id="normCheck" unchecked />
        &nbsp;&nbsp;<label for="minmaxCheck">Per-volume graph range</label>
        <input type="checkbox" id="minmaxCheck" unchecked />
        &nbsp;&nbsp;<label for="frameCheck">per-volume contrast</label>
        <input type="checkbox" id="frameCheck" unchecked />
        &nbsp;&nbsp;<button id="prevVolume">Back</button>
        &nbsp;&nbsp;<button id="nextVolume">Forward</button>
        &nbsp;&nbsp;<button id="animate">Animate</button>
        &nbsp;&nbsp;<button id="about">About 4D</button>
      </div>
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer id="location">Click on `...` below graph to see all volumes</footer>
  </body>
</html>
<script type="module">
  import * as niivue from "../dist/index.js"
  fontMinPxSlider.oninput = function () {
    nv1.opts.fontMinPx = this.value
    nv1.resizeListener()
    nv1.drawScene()
  }
  fontSizeScalingSlider.oninput = function () {
    nv1.opts.fontSizeScaling = (this.value * 0.01)
    nv1.resizeListener()
    nv1.drawScene()
  }
  dpiCheck.onclick = function () {
    nv1.setHighResolutionCapable(this.checked)
  }
  var nv1 = new niivue.Niivue({
    onLocationChange: handleLocationChange,
    onFrameChange: handleFrameChange,
    loglevel: 'debug'
  })
  darkCheck.onchange = function () {
    let v = 1
    if (this.checked)
        v = 0
    nv1.opts.backColor = [v, v, v, 1]
    nv1.drawScene()
  }
  await nv1.attachTo("gl1")
  nv1.setRadiologicalConvention(false)
  nv1.setSliceType(nv1.sliceTypeMultiplanar)
  nv1.graph.autoSizeMultiplanar = true
  nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
  nv1.graph.normalizeValues = false
  nv1.graph.opacity = 1.0
  modalitySelect.onchange = async function (url) {
    var volumeList1 = [
      {
        url: "",
        limitFrames4D: 5
      },
    ]
    let img = url ? url : "../images/mpld_asl.nii.gz"
    const modality =  this.options[this.selectedIndex].text
    if (modality === "DWI") {
      img = "https://s3.amazonaws.com/openneuro.org/ds004884/sub-M2309/ses-960/dwi/sub-M2309_ses-960_acq-epb0p2_dir-AP_run-15_dwi.nii.gz"
    }
    if (modality === "fMRI") {
      img = "https://s3.amazonaws.com/openneuro.org/ds004884/sub-M2309/ses-960/func/sub-M2309_ses-960_task-naming40_acq-epfid2_dir-AP_run-2_bold.nii.gz"
    }
    if (modality === "FLAIR") {
      img = "https://s3.amazonaws.com/openneuro.org/ds004884/sub-M2309/ses-960/anat/sub-M2309_ses-960_acq-spcir2p2_run-5_FLAIR.nii.gz"
    }
    if (modality === "T1") {
      img = "https://s3.amazonaws.com/openneuro.org/ds004884/sub-M2309/ses-960/anat/sub-M2309_ses-960_acq-tfl3p2_run-3_T1w.nii.gz"
    }
    if (modality === "T2") {
      img = "https://s3.amazonaws.com/openneuro.org/ds004884/sub-M2309/ses-960/anat/sub-M2309_ses-960_acq-spc3p2_run-4_T2w.nii.gz"
    }
    volumeList1[0].url = img
    nv1.loadImages(volumeList1)
  }
  let query = window.location.search;
  const params = new URLSearchParams(query);
  let url = params.get("url");
  modalitySelect.onchange(url)
  nv1.onImageLoaded = (volume) => {
    if (nv1.volumes[0].hdr.dims[4] > 1) {
      controls4D.style.display = 'block'
    } else {
      controls4D.style.display = 'none'
    }
  }
  dragSelect.onchange = function () {
    switch (this.value) {
      case "none":
        nv1.opts.dragMode = nv1.dragModes.none
        break
      case "contrast":
        nv1.opts.dragMode = nv1.dragModes.contrast
        break
      case "measurement":
        nv1.opts.dragMode = nv1.dragModes.measurement
        break
      case "pan":
        nv1.opts.dragMode = nv1.dragModes.pan
        break
    }
  }
  viewSelect.onchange = function () {
    nv1.setSliceType(parseInt(this.value))
  }
  normCheck.onchange = function () {
    nv1.graph.normalizeValues = this.checked
    nv1.updateGLVolume()
  }
  minmaxCheck.onclick = function () {
    nv1.graph.isRangeCalMinMax = this.checked
    nv1.updateGLVolume()
  }
  let currentVol = 0
  prevVolume.onclick = function () {
    currentVol = nv1.getFrame4D(nv1.volumes[0].id)
    currentVol--
    currentVol = Math.max(currentVol, 0)
    nv1.setFrame4D(nv1.volumes[0].id, currentVol)
  }
  nextVolume.onclick = function () {
    currentVol = nv1.getFrame4D(nv1.volumes[0].id)
    currentVol++
    currentVol = Math.min(currentVol, nv1.volumes[0].nFrame4D - 1)
    nv1.setFrame4D(nv1.volumes[0].id, currentVol)
  }
  frameCheck.onchange = function () {
    currentVol = nv1.getFrame4D(nv1.volumes[0].id)
    handleFrameChange(nv1.volumes[0], currentVol)
  }
  function handleFrameChange(volume, index) {
    if (!frameCheck.checked) return
    const minmax = volume.calMinMax(index)
    nv1.updateGLVolume()
    const str = `frame ${index} intensity ${volume.cal_min.toFixed(2)}..${volume.cal_max.toFixed(2)}`
  }
  function handleLocationChange(data) {
    document.getElementById("location").innerHTML =
      "&nbsp;&nbsp;" + data.string
  }
  var animationTimer = null
  function doAnimate() {
    currentVol = nv1.getFrame4D(nv1.volumes[0].id)
    currentVol++
    if (currentVol >= nv1.volumes[0].nFrame4D) currentVol = 0
    nv1.setFrame4D(nv1.volumes[0].id, currentVol)
  }
  animate.onclick = function () {
    if (animationTimer == null) animationTimer = setInterval(doAnimate, 100)
    else {
      clearInterval(animationTimer)
      animationTimer = null
    }
  }
  about.onclick = function () {
    alert("4D images can be slow to load. Click the `...` icon below the graph to see the entire dataset. Currently displaying "+nv1.volumes[0].nFrame4D+" of " +nv1.volumes[0].nTotalFrame4D+ " frames.")
  }
</script>
